<template>
	<!--header开始-->
	<div class="header_wrap">
		<div class="header">
			<div class="index_zhedang">
				<van-collapse v-model="activeNames" class="index_zhedang1" @change="onChange($event)">
					<van-collapse-item :title="$store.state.current_play_type" name="2">
						<div class="tab_qiehuan_box">
							<!-- <div class="tab_qiehuan">
                <span @click="wanfa1" :class="{'wanfa':iswanfa}">官方玩法</span>
                <span @click="wanfa2" :class="{'wanfa2':iswanfa2}">信用玩法</span>
              </div>-->
							<div class="tab_qiehuan">
								<span @click="changePlayMethods(true)" :class="{'wanfa':isGuanfangPlay}">官方玩法</span>
								<span @click="changePlayMethods(false)" :class="{'wanfa2':!isGuanfangPlay}">信用玩法</span>
							</div>
							<div class="trade_center_box" v-if="isGuanfangPlay">
								<!--vant-->
								<van-tabs v-model="activeNametabs" title-active-color="#d31d17" line-height="0" line-width="0" @click="changeTabs" class="tab_qie">
									<van-tab title="五星直选" name="a">
										<div class="danxuan_div2 trade_center_box1">
											<router-link class="wanfa3" :class="[item.type==$store.state.current_play_type?'on':'']" v-for="(item,index) in list" @click.native="pitchup(item)" :key="index" tag="span" :to="item.pask">{{item.title}}</router-link>
										</div>
									</van-tab>
									<van-tab title="趣味" name="b">
										<div class="danxuan_div2 trade_center_box1">
											<router-link class="wanfa3" :class="[item.type==$store.state.current_play_type?'on':'']" v-for="(item,index) in list2" @click.native="pitchup(item)" :key="index" tag="span" :to="item.pask">{{item.title}}</router-link>
										</div>
									</van-tab>
									<van-tab title="前三直选" name="c">
										<div class="danxuan_div2 trade_center_box1">
											<router-link class="wanfa3" :class="[item.type==$store.state.current_play_type?'on':'']" v-for="(item,index) in list3" @click.native="pitchup(item)" :key="index" tag="span" :to="item.pask">{{item.title}}</router-link>
										</div>
									</van-tab>
									<van-tab title="中三直选" name="d">
										<div class="danxuan_div2 trade_center_box1">
											<router-link class="wanfa3" :class="[item.type==$store.state.current_play_type?'on':'']" v-for="(item,index) in list4" @click.native="pitchup(item)" :key="index" tag="span" :to="item.pask">{{item.title}}</router-link>
										</div>
									</van-tab>
									<van-tab title="后三直选" name="e">
										<div class="danxuan_div2 trade_center_box1">
											<router-link class="wanfa3" :class="[item.type==$store.state.current_play_type?'on':'']" v-for="(item,index) in list5" @click.native="pitchup(item)" :key="index" tag="span" :to="item.pask">{{item.title}}</router-link>
										</div>
									</van-tab>
								</van-tabs>
							</div>
							<!-- 信用 -->
							<div class="trade_center_box1" v-else>
								<div class="danxuan_div3">
									<router-link class="wanfa3" :class="[item.type==$store.state.current_play_type?'on':'']" v-for="(item,index) in list6" @click.native="pitchup(item)" :key="index" tag="span" :to="item.pask">{{item.title}}</router-link>
								</div>
							</div>
						</div>
					</van-collapse-item>
				</van-collapse>
			</div>

			<div class="icon_you">
				<a class="icon_you1" @click="zoushi">
					<img src="../../../assets/images/caipiao/top03.png" />
				</a>
				<a class="icon_you2" @click="caidan">
					<img src="../../../assets/images/caipiao/top02.png" alt />
				</a>
			</div>
		</div>
		<!--点击顶部走势图弹窗-->
		<!--<van-popup v-model="show" position="top">

			<ul class="zoushitu_icon">
				<li class="zoushitu_icon_li" @click="zoushi1">走势图</li>
				<li class="zoushitu_icon_li" @click="zoushi2">玩法说明</li>
			</ul>
		</van-popup>-->

		<div class="zoushitu_menu" v-if="show">
			<!--v-if="ismenban"-->
			<div class="mengban" @click="menbanclick" ></div>
			<ul class="zoushitu_icon">
				<li class="zoushitu_icon_li" @click="zoushi1">走势图</li>
				<li class="zoushitu_icon_li" @click="zoushi2">玩法说明</li>
			</ul>
		</div>

		<!--点击顶部的菜单栏侧滑菜单弹窗-->
		<van-popup v-model="caidanshow" position="right">
			<div class="caidan_box">
				<div class="caidan_logo">
					<div class="caidan_xinxi">
						<!--<p>{{$store.state.user_info.nickname}}</p>-->
						<p>{{msg.nickname}}</p>
						<p>余额：{{$store.state.user_info.wallet}}元</p>
					</div>
				</div>
				<ul class="caindan_ul">
					<li class="caindan_li">
						<div class="caindan_li_div caindan_li_div2">
							<span class="caindan_li_span1" @click="chongzhi">充值</span>
							<span class="caindan_li_span2" @click="tixian">提现</span>
						</div>
					</li>
					<li class="caindan_li caindan_li2">
						<van-collapse v-model="activeName" accordion>
							<van-collapse-item title="个人管理" name="1" icon="personage">
								<ul class="ziye_ul">
									<li class="ziye_li" @click="ziliao">个人资料</li>
									<li class="ziye_li" @click="yinhangka">银行卡管理</li>
									<li class="ziye_li" @click="caizhong">彩种限额</li>
								</ul>
							</van-collapse-item>
							<van-collapse-item title="资产明细" name="2" icon="property">
								<ul class="ziye_ul">
									<li class="ziye_li" @click="bianzhang">帐变记录</li>
									<li class="ziye_li" @click="chongzhijilu">充值记录</li>
									<li class="ziye_li" @click="tixianjilu">提现记录</li>
								</ul>
							</van-collapse-item>
							<van-collapse-item title="安全中心" name="3" icon="safety">
								<ul class="ziye_ul">
									<li class="ziye_li" @click="denglupassword">登录密码</li>
									<!--<li class="ziye_li" @click="jiaoyipassword">交易密码</li>-->
								</ul>
							</van-collapse-item>
						</van-collapse>
					</li>
					<li class="caindan_li" @click="gonggao">
						<div class="caindan_li_div6">
							<span class="biaoti_span6">公告通知</span>
						</div>
					</li>
					<li class="caindan_li" @click="feedbackclick">
						<div class="caindan_li_div66">
							<span class="biaoti_span66">问题反馈</span>
						</div>
					</li>
					<li class="caindan_li" @click="tuichu">
						<div class="caindan_li_div7">
							<span class="biaoti_span7">安全退出</span>
						</div>
					</li>
				</ul>
			</div>
		</van-popup>
		<!--蒙版-->
		<div class="mengban" @click="menbanclick" v-if="ismenban"></div>
	</div>
	<!--header结束-->
</template>

<script>
	export default {
		data() {
			return {
				activeName: '0', //右侧菜单手风琴
				active: 0,
				isGuanfangPlay: true,
				activeNametabs: "五星单式", //tab标签页
				titlename: "五星复式",
				activeNames: ["1"], //vant遮挡面板
				xianshi2: true,
				show: false, //默认走势图弹窗不显示
				caidanshow: false, //菜单栏弹窗默认不显示
				ismenban: false, //蒙版
				msg:'',

				// 菜单颜色 五星直选玩法-----
				list: [{
						pask: "/wuxingfushi",
						title: "五星复式",
						name: "五星复式",
						type: "五星直选复式"
					},
					{
						pask: "/wuxingdanshi",
						title: "五星单式",
						name: "五星单式",
						type: "五星直选单式"
					},
					{
						pask: "/wuxingzuhe",
						title: "五星组合",
						name: "五星组合",
						type: "五星直选组合"
					}
				],
				// 菜单颜色 趣味玩法-----
				list2: [{
						pask: "/yifanfengshun",
						title: "一帆风顺",
						name: "一帆风顺",
						type: "趣味一帆风顺"
					},
					{
						pask: "/chengshuang",
						title: "好事成双",
						name: "好事成双",
						type: "趣味好事成双"
					},
					{
						pask: "/sanbaoxi",
						title: "三星报喜",
						name: "三星报喜",
						type: "趣味三星报喜"
					},
					{
						pask: "/facai",
						title: "四季发财",
						name: "四季发财",
						type: "趣味四季发财"
					}
				],
				// 菜单颜色 前三直选玩法-----
				list3: [{
						pask: "/qianfushi",
						title: "前三直选复式",
						name: "前三直选复式",
						type: "前三直选复式"
					},
					{
						pask: "/qianridio",
						title: "前三直选单式",
						name: "前三直选单式",
						type: "前三直选单式"
					},
					{
						pask: "/qianhezhi",
						title: "前三直选和值",
						name: "前三直选和值",
						type: "前三直选和值"
					}
				],
				// 菜单颜色 中三直选------
				list4: [{
						pask: "/zhongfushi",
						title: "中三直选复式",
						name: "中三直选复式",
						type: "中三直选复式"
					},
					{
						pask: "/zhongridio",
						title: "中三直选单式",
						name: "中三直选单式",
						type: "中三直选单式"
					},
					{
						pask: "/zhonghezhi",
						title: "中三直选和值",
						name: "中三直选和值",
						type: "中三直选和值"
					}
				],
				// 菜单颜色 -后三直选-----
				list5: [{
						pask: "/houfushi",
						title: "后三直选复式",
						name: "后三直选复式",
						type: "后三直选复式"
					},
					{
						pask: "/houridio",
						title: "后三直选单式",
						name: "后三直选单式",
						type: "后三直选单式"
					},
					{
						pask: "/houhezhi",
						title: "后三直选和值",
						name: "后三直选和值",
						type: "后三直选和值"
					}
				],
				// 菜单颜色 -信用-----
				list6: [{
						pask: "/zhenghe",
						title: "整合",
						name: "整合",
						type: "整合"
					},
					{
						pask: "/longhudou",
						title: "龙虎斗",
						name: "龙虎斗",
						type: "龙虎斗"
					},
					{
						pask: "/wuzhongyi",
						title: "全5中1",
						name: "全5中1",
						type: "全5中1",
					}
				],
				isred: 0,
				// 官方信用
				iswanfa: true,
				iswanfa2: false
			};
		},
		created() {
			//余额
			this.http
				.get("/api/member/info")
				.then(res => {
					if(res.status_code == 200) {
						this.msg = res.data;
					} else {
						this.$toast(res.message);
					}
				});

			const {
				playMethods
			} = this.$route.params;
			//  console.log(playMethods);
			if(playMethods === "guanfang") {
				this.isGuanfangPlay = true;
			} else if(playMethods === "xinyong") {
				this.isGuanfangPlay = false;
			}

		},

		methods: {
			//蒙版
			menbanclick() {
				this.activeNames = [2];
//				setTimeout(() => {
					this.ismenban = false;
					this.show = false;
//				}, 250);
			},
			//点击遮挡面板右侧的菜单隐藏
			onChange($event) {
				console.log(113561);
				this.show = false; //走势图隐藏
				this.caidanshow = false; //走势图隐藏
				this.ismenban = !this.ismenban; //蒙版
			},
			// 点击官方或者信用
			changePlayMethods(bool) {
				this.isGuanfangPlay = bool;
				const {
					name,
					path
				} = this.$route;
				this.active = bool;
				console.log(bool);
				if(bool) {
					this.$router.push("/wuxingfushi");
					this.$store.commit("changeTitle", this.list[0].name);
					this.$router.push(this.list[0].pask);
				} else {
					this.$router.push("/zhenghe");
					this.$store.commit("changeTitle", this.list6[0].name);
					this.$router.push(this.list6[0].pask);
				}
				this.activeNametabs = "a";
			},
			// 点击小众玩法
			changeTabs(e) {
				console.log(e);
				let url = "";
				let name = "";
				if(e === "a") {
					url = this.list[0].pask;
					name = this.list[0].name;
				}
				if(e === "b") {
					url = this.list2[0].pask;
					name = this.list2[0].name;
				}
				if(e === "c") {
					url = this.list3[0].pask;
					name = this.list3[0].name;
				}
				if(e === "d") {
					url = this.list4[0].pask;
					name = this.list4[0].name;
				} else if(e === "e") {
					url = this.list5[0].pask;
					name = this.list5[0].name;
				}
				this.$store.commit("changeTitle", name);
				this.$router.push(url);
			},

			// 选中玩法。titlename
			pitchup(title) {
				this.activeNames = [2];
				//				this.$store.commit("changeTitle", title);
				this.ismenban = false; //蒙版
				console.log(this.ismenban);
			},

			// 菜单
			change: function(index) {
				this.isred = index;
			},
			//官方玩法
			wanfa1() {
				//    this.$router.push("/wuxingfushi");
				this.xianshi2 = true;
				this.iswanfa = true;
				this.iswanfa2 = false;
			},
			// 信用玩法
			wanfa2() {
				//    this.$router.push("/zhenghe");
				this.xianshi2 = false;
				this.iswanfa = false;
				this.iswanfa2 = true;
			}, //顶部右边走势图标
			zoushi() {
				this.activeNames = [2];
				this.show = true;
				this.caidanshow = false;
				this.ismenban = false; //蒙版
			},
			//顶部右边菜单图标
			caidan() {
				this.activeNames = [2];
				this.caidanshow = true;
				this.show = false;
				this.ismenban = false; //蒙版
			},
			//----顶部右边的走势图---
			//点击进入走势图
			zoushi1() {
				console.log(1111);
				this.$router.push("/zoushitu");
				//this.$router.replace({path:'/guanfang/zoushitu'});
			},
			//点击计入玩法说明
			zoushi2() {
				this.$router.push("/wanfashuoming");
			},
			//右边侧滑菜单
			//充值
			chongzhi() {
				this.$router.push("/chongzhi");
			},
			//提现
			tixian() {
				this.$router.push("/tixian");
			},
			//进入个人资料
			ziliao() {
				this.$router.push("/gerenziliao");
			},
			//进入银行卡管理
			yinhangka() {
				this.$router.push("/yinkangka");
			},
			//进入彩种限额
			caizhong() {
				this.$router.push("/caizhong");
			},
			//进入帐变记录
			bianzhang() {
				this.$router.push("/zhangbian");
			},
			//进入充值记录
			chongzhijilu() {
				this.$router.push("/chongzhijilu");
			},
			//进入提现记录
			tixianjilu() {
				this.$router.push("/tixianjilu");
			},
			//进入登录密码
			denglupassword() {
				this.$router.push("/denglumima");
			},
			//进入交易密码
			jiaoyipassword() {
				this.$router.push("/jiaoyimima");
			},
			//公告通知
			gonggao() {
				this.$router.push("/gonggaoxinxi");
			},
			//问题反馈
			feedbackclick() {
				this.$router.push("/feedback");
			},
			//安全退出
			tuichu() {
				// 对接口
				this.http
					.post("/api/logout")
					.then(res => {
						if(res.status_code == 200) {
							localStorage.removeItem("token");
							this.$store.commit("setToken", null);
							this.$router.replace({
								name: "login"
							});
							//							localStorage.clear();
							this.$toast("退出成功");
						} else {
							this.$toast(res.message);
						}
					})

				/*this.$router.replace({
					name: "login"
				});
				localStorage.clear();
				this.$toast("退出成功");*/
			}
		}
	};
</script>
<style>
	.tab_qiehuan span.wanfa2,
	.tab_qiehuan span.wanfa {
		background-color: #d31d17;
		border-radius: 0.25rem;
		color: #fff;
	}
	/* 菜单 */

	.danxuan_div2 span.router-link-active {
		color: #d31d17;
		border: 1px solid #d31d17;
	}

	.danxuan_div2 span.on {
		color: #d31d17;
		border: 1px solid #d31d17;
	}

	.danxuan_div3 span.router-link-active {
		color: #d31d17;
	}

	.danxuan_div3 span.on {
		color: #d31d17;
	}

	.danxuan_div2 span {
		border: solid 0.02rem #cccccc;
		border-radius: 0.05rem;
		padding: 0.1rem 0.2rem;
		margin-right: 5%;
	}

	.danxuan_div2 span:last-child {
		margin-right: 0;
	}

	.danxuan_div2 span {
		margin-bottom: 3%;
	}

	.tab_qiehuan .wanfa {
		background-color: #d31d17;
		border-radius: 0.25rem;
		color: #fff;
	}

	@import url("../../../assets/css/ttcp/index.css");
	.index_zhedang .index_zhedang1 {
		background: red;
		position: absolute;
		left: 0;
		top: 0;
	}
	/*背景色*/

	.index_zhedang .index_zhedang1 .van-cell--clickable:active,
	.index_zhedang .index_zhedang1 .van-cell {
		background-color: #d31d17;
		color: #ffffff;
	}
	/*三角*/

	.index_zhedang .index_zhedang1 .van-cell__right-icon {
		color: #ffffff;
	}

	.index_zhedang .van-collapse-item__wrapper {
		position: fixed;
		top: 0.88rem;
		width: 100%;
	}

	.index_zhedang .tab_qiehuan .tab_span {
		background: none;
	}

	.index_zhedang .van-collapse-item__content {
		padding: 0;
		padding: 0.2rem 0 0 0;
	}

	.index_zhedang .van-cell:not(:last-child)::after {
		border-bottom: none;
	}

	.tab_qiehuan {
		margin-bottom: 0.2rem;
	}

	.tab_qiehuan span {
		width: 50%;
		text-align: center;
		height: 0.5rem;
		line-height: 0.5rem;
		color: #333333;
	}

	.tab_qiehuan .router-link-active {
		font-size: 0.24rem;
		height: 0.5rem;
		background-color: #d31d17;
		border-radius: 0.25rem;
		color: #fff;
	}

	.index_zhedang [class*="van-hairline"]::after {
		border: none;
	}

	.index_zhedang .van-hairline--top-bottom::after {
		border: none;
	}
	/*走势图图标弹窗*/

	.zoushitu_icon {
		position: fixed;
		top: 0.88rem;
		right: 0;
		width: 2rem;
		text-align: center;
		background: #ffffff;
	}

	.zoushitu_icon .zoushitu_icon_li {
		padding: 0.29rem;
		border-bottom: 1px solid #f2f2f2;
	}
	/*.trade_center_box .van-tab--active{color: #d31d17;}*/

	.trade_center_box {
		border-top: 2px solid #cccccc;
	}

	.mengban {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		background: #000;
		opacity: 0.3;
	}

	.ziye_ul .ziye_li:first-child {
		padding-top: 0;
	}
	/*手风琴左侧图标*/

	.caindan_li .van-icon-personage {
		background: url(../../../assets/images/caipiao/caidan3.png) no-repeat;
		background-size: 100% 100%;
		width: 0.4rem;
		height: 0.4rem;
		margin-top: 0.05rem;
	}

	.caindan_li .van-icon-property {
		background: url(../../../assets/images/caipiao/caidan4.png) no-repeat;
		background-size: 0.4rem 0.4rem;
		width: 0.4rem;
		height: 0.4rem;
		margin-top: 0.05rem;
	}

	.caindan_li .van-icon-safety {
		background: url(../../../assets/images/caipiao/caidan5.png) no-repeat;
		background-size: 0.4rem 0.4rem;
		width: 0.4rem;
		height: 0.4rem;
		margin-top: 0.05rem;
	}

	.caindan_ul .caindan_li2 {
		padding: 0;
	}

	.caindan_ul .caindan_li2 .van-cell {
		padding: 10px 31px;
	}

	.caindan_ul .caindan_li2 .van-cell--clickable:active {
		background: #fff;
	}

	.caindan_ul .caindan_li2 .van-cell:not(:last-child)::after {
		position: absolute;
		left: 0;
	}
	/*左箭头旋转*/

	.van-collapse-item__title .van-cell__right-icon::before {
		transform: rotate(0deg);
	}

	.van-collapse-item__title--expanded .van-cell__right-icon::before {
		transform: rotate(90deg);
	}

	.caindan_li_div7,
	.caindan_li_div6 {
		background: url(../../../assets/images/caipiao/caidan8.png) no-repeat right;
		background-size: 0.25rem 0.25rem;
	}

	.caindan_li_div7 .biaoti_span7,
	.caindan_li_div6 .biaoti_span6 {
		padding-left: 0.48rem;
	}
	/*9-16新增*/

	.caindan_li_div66 .biaoti_span66 {
		padding: 0.1rem 0 0.1rem 0.75rem;
		background: url(../../../assets/images/caipiao/fankui.png) no-repeat left;
		background-size: 0.4rem 0.4rem;
		padding-left: 0.48rem;
	}

	.caindan_li_div66 {
		background: url(../../../assets/images/caipiao/caidan8.png)no-repeat right;
		background-size: 0.25rem 0.25rem;
	}
	.zoushitu_icon{z-index: 99999;}
	.zoushitu_menu{height: 100vh;}
	.mengban{opacity: 0.7;}
</style>
